<template>
  <view class="styleDetails container">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <view class="imageBgg">
      <xsj-image mode="aspectFit" width="750rpx" height="280rpx" src="../../static/image/styleDetails1.png">
        <template v-slot:loading>
          <u-loading-icon mode="circle"></u-loading-icon>
        </template>
      </xsj-image>
      <view class="uploadPd" @click="gotoJump('/pageContent/introduction/styleUpload')">
        <xsj-image mode="aspectFit" width="164rpx" height="150rpx" src="../../static/image/styleDetails2.png">
          <template v-slot:loading>
            <u-loading-icon mode="circle"></u-loading-icon>
          </template>
        </xsj-image>
      </view>
    </view>

    <view class="styleList" v-if="!loadingShow">
      <view class="styleItem" v-for="(item, index) in pictureList" :key="index" @click="gotoJump('/pageContent/introduction/styleMessage', item)">
        <xsj-image mode="aspectFill" width="330rpx" height="234rpx" :src="item.thumb">
          <template v-slot:loading>
            <u-loading-icon mode="circle"></u-loading-icon>
          </template>
        </xsj-image>
        <text>{{ item.title }}</text>
      </view>

      <view class="noList" v-if="!(pictureList && pictureList.length)">
        <img src="../../static/image/noList.png" />
        <view class="textTip">暂无信息</view>
      </view>
    </view>

    <view class="loading" v-if="loadingShow"><u-loading-icon></u-loading-icon></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingShow: true,
      pictureList: [],
    }
  },
  onLoad() {
    this.getFindPictureList()
  },
  methods: {
    getFindPictureList() {
      this.loadingShow = true
      this.$https
        .post({
          url: '/axh/findBy/pictureAudit',
          data: {
            status: 1,
            page: 1,
            limit: 200,
            isValid: 1,
            phoneAuth: 1,
          },
        })
        .then((res) => {
          this.loadingShow = false
          this.pictureList = res.auditVoList
        })
    },
    gotoJump(url, item) {
      if (item) {
        uni.navigateTo({
          url: `${url}?content=${item.content}&thumb=${item.thumb}`,
        })
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.styleDetails {
  .imageBgg {
    position: relative;
    .uploadPd {
      position: absolute;
      top: 66rpx;
      right: 76rpx;
    }
  }
  .styleList {
    padding: 32rpx 32rpx;
    display: flex;
    flex-wrap: wrap;
    .styleItem {
      margin-right: 24rpx;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      &:nth-child(2n) {
        margin-right: 0;
      }
      text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        font-size: 20rpx;
        color: #fff;
        padding: 16rpx 0;
        background: linear-gradient(180deg, rgba(93, 92, 92, 0) 0%, #292929 100%);
      }
    }
  }
}
.loading {
  margin-top: 50rpx;
}
</style>
